<template>
  <div id="addOrder">
    <div class="order-box bg-color font-color">
      <div class="order-content clearfix front-color">
        <div class="bgc-title ">
          <ul class="nav">
            <li @click="ordtag('Venue')" :class='{liWitch:current == "Venue"}'>{{$t('myAdd.orderVue.venue')}}</li>
            <li @click="ordtag('Outside')" :class='{liWitch:current == "Outside"}' v-if="this.symbols.otcOpen === '1'">{{$t('myAdd.orderVue.outside')}}</li>
          </ul>
          <div class="bgc-right clearfix " v-if="current === 'Venue'">
            <div class="sumbolText">{{$t('myAdd.orderVue.transactionPair')}}:</div>
            <div class="select-box">
              <template>
                <inline-input :property = "entrust" v-model = "entrust.value" v-on:onevents="setsymbol"></inline-input>
              </template>
            </div>
          </div>
          <div class="bgc-right clearfix " v-if="current == 'Outside'">
            <div class="select-box">
              <template>
                <inline-input :property = "otc_order"
                              v-model = "otc_order.value"
                              v-on:onevents="coinsym">
                </inline-input>
              </template>
            </div>
          </div>
        </div>
        <!-- 币币账户 -->
        <template v-if="coin_pair && current === 'Venue'">
          <div class="venue">
            <order-datalist :coinlist = 'coinList' :orderVueSymbol="coin_pair"></order-datalist>
          </div>
        </template>
        <!-- 法币账户 -->
        <template v-if="coin_seed && current === 'Outside'">
          <div class="outside">
            <otc-order :defaultCoin = 'coin_seed' ref="otcOrders" :paymentsArr="paymentsArr"></otc-order>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="js">
  import { mapState } from 'vuex'
  import InlineInput from '@/components/common/inlineInput'
  import orderDatalist from '@/product/exchange-vue-ex/trade/orderDataList'
  import otcOrder from '@/product/exchange-vue-otc/otc/addPage/otcOrder'
  export default {
    name: 'order',
    props: [],
    components: {
      InlineInput,
      orderDatalist,
      otcOrder
    },
    data () {
      return {
        // 默认显示交易账户
        current: localStorage.getItem('orderVueOrdtag') || 'Venue', // contract Venue
        // 交易账户下拉框
        entrust: {
          formType: 'select',
          name: 'enterust',
          value: null,
          placeholder: '',
          optionList: []
        },
        // 场外订单下拉框
        otc_order: {
          formType: 'select',
          name: 'otc_order',
          value: null,
          placeholder: 'USDT',
          optionList: []
        },
        coin_pair: '',        // 币对
        coin_seed: '',        // 币种
        coin: '',
        noFirst: false,
        coinList: this.$store.state.baseData._coinList, // 市场图标列表
        paymentsArr: []
      }
    },
    mounted () {
      this._P.fixUrl('type') && (this.current = this._P.fixUrl('type')) // 账户类型 币币交易 或 场外交易
      this._P.fixUrl('coin') && (this.coin = this._P.fixUrl('coin'))  //
      this.entrust.optionList = this.option // 交易账户下拉框数据
      this.coin_pair = this.entrust.value
      this.otc_order.optionList = this.currens // 场外账户下拉框数据
      this.noFirst && this.ordtag(this.current) // true 布尔值
    },
    watch: {
      noFirst (val) {
        val && this.ordtag(this.current)
      },
      'option' (val) {
        this.entrust.optionList = val
      },
      'currens' (val) {
        this.otc_order.optionList = val
      },
      '$store.state.baseData._lan' (val) {

      },
      '$store.state.baseData._coinList' (val) {
        this.coinList = val
      },
      'entrust.value' (val) {
        this.coin_pair = val
      }
    },
    computed: {
      ...mapState({
        symbols ({baseData}) {
          if (baseData.isReady) {
            this.noFirst = true
            return baseData
          } else {
            return false
          }
        }
      }),
      option () {
        let arr = []
        let symbol = this.symbols._symbols
        // console.log(symbol)
        if (!symbol) return false
        for (let k in symbol) {
          if (k !== 'myMarket') {
            for (let a in symbol[k]) {
              let obj = {}
              obj.code = symbol[k][a].symbol
              obj.value = symbol[k][a].name
              arr.push(obj)
            }
          }
        }
        if (this.coin) {
          this.otc_order.value = this.coin
          this.entrust.value = arr[0].code
        } else {
          this.entrust.value = arr[0].code
          this.otc_order.value = this.currens[0].code
        }
        return arr
      },
      currens () {
        let arr = []
        let curr = this.symbols._coinList
        for (let i in curr) {
          if (curr[i].otcOpen === 1) {
            let obj = {}
            obj.code = curr[i].name
            obj.value = curr[i].name
            arr.push(obj)
          }
        }
        return arr
      }
    },
    methods: {
      ordtag (tag) { // 切换账户
        this.current = tag
        localStorage.setItem('orderVueOrdtag', this.current)
        if (tag !== 'Venue') {
          this.getPaymentsArr()
          this.coin_seed = this.otc_order.value
        }
      },
      // 币对
      setsymbol (s) {
        if (s.handleType === 'selected') {
          this.coin_pair = s.value.code
        }
      },
      // 币种
      coinsym (i) {
        if (i.handleType === 'selected') {
          this.coin_seed = i.value.code
        }
      },
      // 获取已设置过的收付款数据
      getPaymentsArr () {
        this.axios({
          method: 'post',
          url: this.$store.state.otcUrl.receiving.getPayment,
          params: {},
          hostType: 'otc'
        }).then(res => {
          if (res.code.toString() === '0') {
            res.data.forEach(item => {
              if (item.payment === 'otc.payment.international.wire.transfer') {
                let obj1 = {}
                obj1.payment = item.payment
                this.paymentsArr.push(obj1)
              }
              if (item.payment === 'otc.payment.wxpay') {
                let obj2 = {}
                obj2.payment = item.payment
                this.paymentsArr.push(obj2)
              }
              if (item.payment === 'otc.payment.alipay') {
                let obj3 = {}
                obj3.payment = item.payment
                this.paymentsArr.push(obj3)
              }
            })
          }
        })
      }
    }
  }
</script>


